<template>
	<view class="calendar-select">
		<mars-calendar
			:color="$s.theme"
			:show="show"
			@confirm="dateConfirm"
			@close="dateClose"
			mode="range"
			startText="取车"
			endText="还车"
			:defaultDate="defaultDate"
			:startTimeData="start_date.time"
			:endTimeData="end_date.time"
			:timeRang="time_rang"
			:minHour="$config.base.rent_time || 0"
			:allowSameDay="true"
			ref="car_calendar"
		></mars-calendar>
	</view>
</template>
<script>
	import { mapState } from 'vuex'
	export default {
		name: 'calendar-select',
		props: {
			start:{
				type:[Object,Array],
				default:{}
			},
			end:{
				type:[Object,Array],
				default:{}
			},
			//是否自动设置Vuex的值
			setvuex:{
				type:[Boolean],
				default:true
			},
			carid:{
				type:[Number],
				default:0
			}
		},
		data() {
			return {
				show:false,
				time_rang:[0,1440],					//时间限制						
				start_date:{},
				end_date:{},
				date_price:{}
			}
		},
		watch: {
		},
		computed:{
			defaultDate(){
				return [this.start.date,this.end.date]
			},
			// 监听输入日期变化
			dateChang(){
				this.start_date=this.start
				this.end_date=this.end
			},
			
			...mapState({
				$s:state => state.$style,
				sys:state => state.$sys,
				is_drive:state => state.$isDrive,
			})
		},
		mounted(){
			this.$u.api.homeConfig().then(res=>{
				res=res.data
				
				//租还时间限制
				this.time_rang=[res.worktime.start,res.worktime.end]
			})
		},
		onReady(){
			if(this.carid>0){
				this.$u.api.calDatePrice({
					car_id:this.carid,
					is_drive: this.is_drive
				}).then(res=>{
					this.date_price=res.data
					this.$refs.car_calendar.setFormatter(this.formatter)
				})
			}
		},
		methods: {
			//确认借还车日期
			dateConfirm(e){
				this.show=false;
				// 如果开启则自动把参数设置再缓存里面
				if(this.setvuex){
					this.$store.commit('setStartDate',e.start_date)
					this.$store.commit('setEndDate',e.end_date)
					this.$store.commit('setDiffDay',e.diff_day)
				}
				this.$emit('dateConfirm',{
					start_date:e.start_date,
					end_date:e.end_date,
					diff_day:e.diff_day
				})
			},
			formatter(day) {
				let key=day.date.getFullYear()+'-'+(day.date.getMonth()+1)+'-'+day.date.getDate()
				if(key in this.date_price){
					day.bottomInfo = this.date_price[key].price
					day.dot = this.date_price[key].dot==1?true:false
					day.disabled = this.date_price[key].disabled==1?true:false
				}
				return day
			},
			//打开日历控件
			dateOpen(){
				this.show=true
			},
			//关闭日期弹窗
			dateClose(){
				this.$emit('close')
				this.show=false
			},
		}
	};
</script>
<style lang="scss">
</style>
